<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        body {
            background-color: black;
        }

        canvas {
            background-color: black;
            position: absolute;
            top: calc(50vh - 250px);
            left: calc(50vw - 200px);
        }

        #overlay {
            position: absolute;
            width: 400px;
            height: 400px;
            top: calc(50vh - 250px);
            left: calc(50vw - 200px);
            background-image: radial-gradient(transparent 20%, #000 69%);
        }

        #inp {
            width: 400px;
            height: 100px;
            position: absolute;
            left: calc(50vw - 200px);
            top: calc(50vh + 60px);
            color: white;
            text-align: center;
            font: 20px Verdana;
        }

        #alp {
            width: 200px;
        }
    </style>
</head>
<body>
<canvas id=c></canvas>
<div id=overlay></div>
<div id=inp>
    <p>Alpha</p>

    <p>0
        <input type=range min=0 max=100 step=1 id=alp value=10/> 1
    </p>
</div>
</body>
</html>
<script>
    var w = c.width = 400,
            h = c.height = 400,
            ctx = c.getContext('2d'),
            repaintAlpha = .1,

            tau = Math.PI * 2,
            delta = .004,
            thickness = .2,

            frame = 0;

    function anim() {
        window.requestAnimationFrame(anim);

        ++frame;

        ctx.fillStyle = 'rgba(0, 0, 0, repAl)'.replace('repAl', repaintAlpha);
        ctx.fillRect(0, 0, w, h);

        for (var i = 0; i < w; ++i) {
            ctx.strokeStyle = 'hsl(hue, 80%, 50%)'.replace('hue', (360 / (w / 3) * i - frame) % 360);
            ctx.beginPath();
            ctx.arc(w / 2, h / 2, (i + frame) % w / 2, (frame * delta + i) % tau, (delta * frame + thickness + i) % tau);
            ctx.stroke();
            ctx.closePath();
        }
    }
    anim();

    inp.onmousemove = function () {
        repaintAlpha = alp.value / 100;
    }
</script>